<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>updatePassword</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <link href="../../teacher/bootstrap5/bootstrap.min.css" rel="stylesheet" >
  <style>
    * {
      margin: 0;
      padding: 0;


    }

    html,
    body {
      min-width: 1000px;
      height: 100%;
      background: url('image/bg1.jpg') no-repeat;



    }

    .content {
      margin: 20px 100px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 2px;
    }

    .head-list {
      list-style-type: none;
      display: flex;
      align-items: center;
      justify-content: left;
      height: 50px;

      background: rgb(52, 73, 93);
    }
    .head-list li:nth-child(4){
      flex-grow: 2;
      margin-left: 550px;
    }

    .head-list li {
      margin-left: 40px;
    }

    .head-list li a {
      text-decoration: none;
      color: #fff;
    }

    .head-list li a:hover {
      color: rgb(229, 229, 229);
    }

    /* 标题 */
    .title {
      margin-left: 20px;
      color: rgb(52, 73, 93);
      font-size: 30px;
      font-weight: 700;
    }


  /*  修改密码主体*/
    .box {
      margin: auto;
      width: 1200px;
      height: 600px;
      display: flex;

      align-items: center;
      justify-content: center;


    }
    .box-content{
      width: 300px;
      height: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      background-color: #cde5f3;
      box-shadow: 5px 5px rgba(0,0,0,0.5);


    }
    .input-box{
      margin: 20px 0;
    }
    #login,#account,#password {
      outline: none;
      border-left: 1px dashed rgb(229, 229, 229);
      border-right: 1px dashed rgb(229, 229, 229);
      border-top: 2px solid rgb(229, 229, 229);
      border-bottom:2px solid rgb(229,229,229) ;

    }
  </style>
</head>
<body>


<!--<form>-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputEmail1">old password</label>-->
<!--    <input type="password" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputPassword1">new password</label>-->
<!--    <input type="password" class="form-control" id="exampleInputPassword1">-->
<!--  </div>-->

<!--  <button id="login"  class="btn btn-primary">Submit</button>-->
<!--</form>-->
<ul class="head-list">
  <li><a href="http://localhost/student?page=1&size=7&username=#(account)">选课界面</a></li>
  <li><a href="http://localhost/student/selectCourse?page=1&size=7&username=#(account)">选课详情</a></li>
  <li><a href="http://localhost/all/student/update.html?page=1&size=7&username=#(account)">修改密码</a></li>

</ul>



<div class="box">
<div class="box-content">
    <span style="margin: 50px 0;
            color: rgb(52, 73, 93);
            font-size: 30px;
            font-weight: 700;">修改密码</span>
  <div class="input-box">
    <label>原密码</label>
    <input type="password" id='account' />
  </div>
  <div class="input-box">
    <label>新密码</label>
    <input type="password" id='password' />

  </div>
  <div class="btn-box">
    <div>
      <button id="login">修改</button>
    </div>
  </div>
</div>

</div>


<script>


  $(function () {
    $('#login').on('click', function () {
      let getUsername=window.location.href.split('?')[1];
      let username=new URLSearchParams(getUsername).get('username');
      console.log(username);
      //获取登陆的账号和密码
      var account = $('#account').val();
      var password = $('#password').val();
      //进行ajax请求发送数据到后端进行验证
      $.post('http://localhost/student/update?username='+username, {
        old: account, new: password
      }, function (res) {
        if (res===true){
          alert("修改成功,请重新登陆")
          window.location.href = 'http://localhost/all/student/login.html';
        }
        else alert("密码错误");
      })
    })
  }
  )



  //跳转到注册界面
  $(function () {
    $('#regist').on('click', function () {
      window.location.href = 'signUp.html';
    })
  })


  //按下回车触发登陆
  $(document).keydown(function (e) {
    if(e.which===13){
      $('#login').click();
    }
  })

</script>
</body>
</html>